var SalaryDetail = function () {
  var template = /* html */ `
    <div class="salary-detail" v-loading.fullscreen.lock="loading">
      <div class="person-info">
        <div>编号:{{attendance.userId}}</div>
        <div>工号:{{attendance.workerNo}}</div>
        <div>姓名:{{attendance.userName}}</div>
        <div>部门:{{attendance.deptName}}</div>
        <div v-if="attendance.groupName!==null">考勤组:{{attendance.groupName}}</div>
        <div>计薪方式:{{attendance.method}}</div>
        <div class="emphasize">出勤工资:{{attendance.attendanceSalary}}</div>
        <div class="emphasize">计件工资:{{attendance.pieceWage}}</div>
        <div class="emphasize">社保(个人):{{attendance.socialSecurity}}</div>
        <div class="emphasize">社保(公司):{{attendance.companySocialSecurity}}</div>
        <div class="emphasize">公积金:{{attendance.accumulationFund}}</div>
        <div class="emphasize">电费:{{attendance.electricFee}}</div>
        <div class="emphasize">水费:{{attendance.waterFee}}</div>
        <div class="emphasize">补料扣款:{{attendance.applyRepairMoney}}</div>
        <div class="emphasize">其他加项:{{attendance.otherAddition}}</div>
        <div class="emphasize">其他减项:{{attendance.otherDeduction}}</div>
        <div class="emphasize">行政奖励:{{attendance.administrativePenaltyForAward}}</div>
        <div class="emphasize">行政处罚:{{attendance.administrativePenaltyForPunish}}</div>
        <div class="emphasize">税前工资:{{attendance.realSalary}}</div>
        <div class="emphasize">个人所得税:{{attendance.personalIncomeTax}}</div>
        <div class="emphasize">
          税后工资:{{afterTaxSalary}}
        </div>
      </div>
      <div class="salary-detail-table" v-if="detailList!==null">
        <el-table fit stripe border :data="detailList" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="日期" prop="workdate" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="月薪" prop="monthlySalary" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="时薪" prop="hourlySalary" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="当日应得工资" prop="dateSalary" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="请假扣款" prop="leaveDeductions" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="请假时长" prop="leaveHours" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="旷工扣款" prop="absentDeductions" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="旷工时长" prop="absentHours" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="加班工资" prop="overtimeSalary" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="加班时长" prop="overtimeHours" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="迟到扣款" prop="lateDeductions" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="早退扣款" prop="earlyDeductions" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="实得工资" prop="realSalary" min-width="100px" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      attendance: {
        type: Object,
        required: true
      },
      search: {
        type: Object,
        required: true
      }
    },

    computed: {
      afterTaxSalary: function () {
        var attendance = this.attendance;
        var salary = attendance.realSalary - attendance.personalIncomeTax;
        return SysUtil.decimalNumber(salary);
      }
    },

    data: function () {
      return {
        loading: false,
        detailList: null
      };
    },

    created: function () {
      this.setDetailList();
    },

    methods: {
      setDetailList: function () {
        var attendance = this.attendance,
          search = this.search;
        var self = this;
        this.loading = true;
        ajaxRequest('attendance/getDailySalaryDetail', {
          personId: attendance.userId,
          startDate: moment(search.startDate).format('YYYY-MM-DD'),
          endDate: moment(search.endDate).format('YYYY-MM-DD'),
        }).then(function (detailList) {
          var salaryFields = ['monthlySalary', 'dateSalary', 'hourlySalary', 'realSalary', 'leaveDeductions', 'absentDeductions',
            'overtimeSalary'
          ];
          for (var i = 0; i < detailList.length; i++) {
            var detail = detailList[i];
            for (var j = 0; j < salaryFields.length; j++) {
              var salaryField = salaryFields[j];
              var value = detail[salaryField];
              if (typeof value === 'number') {
                value = _.round(value, 2);
                detail[salaryField] = value;
              }
            }
          }
          self.detailList = detailList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
